<template>
	<view class="container review">

		<!-- 轮播头部 -->
		<!-- (0:视频课程 1:学习咨询 2:知识精讲 3:法律法规,4 热搜) -->
		<view class="stickyClass" v-if="type == 0 || type == 1 || type == 2">
			<v-tabhead @barTap="barTap" :headItems="headItems" :type="type" :activeIndex="activeIndex"></v-tabhead>
		</view>

		<view v-if="type == 3 ||  type == 4" class="swiperContainer">
			<v-tabbody :type="type" :currentCode="headItems[0].id" :code="headItems[0].id" :homeCode="headItems[0].id"
			 :activeIndex="0"></v-tabbody>

		</view>
		<!-- 轮播内容 -->
		<view v-else class="contents">
			<ul class="levelOne">
				<li @click="liTab(index,data.id)" :class="['levelLi', liIndex == index ? 'liActive' : '']" v-for="(data,index) in levelOneList"
				 :key="index">{{data.text}}</li>
			</ul>
			<view class="swiperContainer">
				<view class="swiperContainer" v-if="activeIndex == index" :current="index" v-for="(item, index) in headItems" :key="index">
					<v-tabbody :classId="headItems[activeIndex].id" :currentCode="headItems[activeIndex].id" :levelId = "levelId" :code="headItems[activeIndex].id" :liIndex = "liIndex" :type="type" :activeIndex="activeIndex">
					</v-tabbody>
				</view>
			</view>
		</view>


		<!-- <swiper v-else :current="activeIndex" class="swiperContainer" @change="changeTab">
			<swiper-item class="swiperContainer" v-for="(item, index) in headItems" :key="index">
				<v-tabbody :homeCode="homeCode" :currentCode="headItems[activeIndex].id" :classId="item.id" :type="type" :code="item.id"
				 :activeIndex="activeIndex">
				</v-tabbody>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import mixins from "@/mixins/index";
	import VTabhead from "./fragment/vtabhead/index";
	import VTabbody from "./fragment/vtabbody/index";

	import baseService from "@/services/study/index.js";
	const service = new baseService();

	export default {
		mixins: [mixins],
		components: {
			VTabhead,
			VTabbody
		},
		computed: {
			homeCode() {
				if (this.headItems.length == 0) return "";
				return this.headItems[0].id;
			},
			codeEnum() {
				// (0:视频课程 1:学习咨询 2:知识精讲 3:法律法规,4 热搜)
				return {
					0: '公安业务课程',
					1: '学习资讯',
					2: '知识精讲',
					3: '法律法规',
					4: '同学们在学什么'

				}
			}
		},
		data() {
			return {
				headItems: [{
						id: '-1',
						text: '全部'
					},
					{
						id: '3',
						text: '公安业务'
					},
					{
						id: '2',
						text: '执法资格'
					}
				],
				activeIndex: 0,
				levelId: '0',
				liIndex: 0,
				type: '0',
				showLevelSkeleton: true,
				levelOneList: []
			};
		},
		onLoad(query) {
			this.type = query.type;
			this.loadQuery(0,1,-1);

			uni.setNavigationBarTitle({
				title: this.codeEnum[query.type]
			});
			if ((!isEmpty(this.type) && this.type == 3) || (!isEmpty(this.type) && this.type == 4)) {
				this.headItems = [{
					id: "-1",
					text: "全部"
				}];
			}
		},
		methods: {
			barTap(activeIndex) {
				this.liIndex = 0
				this.activeIndex = activeIndex;
				this.loadQuery(activeIndex,1,-1)
			},
			changeTab(e) {
				this.liIndex = 0
				this.activeIndex = e.target.current;
				this.loadQuery(e.target.current,1,-1)
			},
			liTab(index,id) {
				this.levelId = id
				this.liIndex = index
				this.loadQuery(this.activeIndex,1,-1)
			},
			loadQuery(i,queryType,levelTid) {
				//ascription,queryType,studyType,level1
				service.queryStudyCat(this.headItems[i].id, queryType, this.type, levelTid).then(res => {
					this.levelOneList = [{
						id: '-1',
						text: '全部'
					}];
					this.levelOneList = this.levelOneList.concat(res.result);
				})
			}
		}
	};
</script>

<style>
	/* page {
		background-color: #f1f1f1;
	} */

	.swiperContainer {
		width: 100%;
		height: calc(100vh - 60upx);
		flex: 1;
		background-color: #fff;
	}
</style>
<style lang="less" scoped>
	.contents {
		display: flex;
	}

	.c_blue {
		color: #377cfd;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.levelOne {
		overflow-y: scroll;
		height: calc(100vh - 60upx);
		background-color: #f1f1f1;
		width: 25%;
		padding: 0;

		li {
			font-size: 24upx;
			padding: 30upx 20upx;
			list-style: none;
			width: 100%;
			text-align: center;
			display: block;
			box-sizing: border-box;

			&.liActive {
				color: #377cfd;
				border-left: 8upx solid #377cfd;
				background-color: #fff;
			}
		}
	}

	.review {
		display: flex;
		flex-direction: column;
	}
</style>
